<template>
  <div class="profile-container">
    <div class="profile-header">
      <h1>个人中心</h1>
    </div>
    
    <div class="profile-content">
      <!-- 左侧菜单 -->
      <div class="profile-sidebar">
        <div 
          class="menu-item" 
          :class="{ active: activeMenu === 'profile' }"
          @click="switchMenu('profile')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="currentColor"/>
          </svg>
          个人资料
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: activeMenu === 'works' }"
          @click="switchMenu('works')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM17 12H7V10H17V12ZM13 8H7V6H13V8ZM17 16H7V14H17V16Z" fill="currentColor"/>
          </svg>
          我的作品
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: activeMenu === 'vip' }"
          @click="switchMenu('vip')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 3H7C5.9 3 5 3.9 5 5V21L12 18L19 21V5C19 3.9 18.1 3 17 3ZM17 18L12 15.82L7 18V5H17V18Z" fill="currentColor"/>
          </svg>
          购买会员
        </div>

        <div 
          class="menu-item" 
          :class="{ active: activeMenu === 'collections' }"
          @click="switchMenu('collections')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 3H7C5.9 3 5 3.9 5 5V21L12 18L19 21V5C19 3.9 18.1 3 17 3ZM17 18L12 15.82L7 18V5H17V18Z" fill="currentColor"/>
          </svg>
          我的收藏
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: activeMenu === 'history' }"
          @click="switchMenu('history')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/>
          </svg>
          浏览记录
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: activeMenu === 'earnings' }"
          @click="switchMenu('earnings')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.8 10.9C10.9 9.7 9.7 9 8 9C5.8 9 4 10.8 4 13C4 15.2 5.8 17 8 17C9.7 17 10.9 16.3 11.8 15.1C12.7 16.3 13.9 17 15.6 17C17.8 17 19.6 15.2 19.6 13C19.6 10.8 17.8 9 15.6 9C13.9 9 12.7 9.7 11.8 10.9ZM8 15C6.9 15 6 14.1 6 13C6 11.9 6.9 11 8 11C9.1 11 10 11.9 10 13C10 14.1 9.1 15 8 15ZM15.6 15C14.5 15 13.6 14.1 13.6 13C13.6 11.9 14.5 11 15.6 11C16.7 11 17.6 11.9 17.6 13C17.6 14.1 16.7 15 15.6 15ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor"/>
          </svg>
          我的收益
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: activeMenu === 'settings' }"
          @click="switchMenu('settings')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19.14 12.94C19.45 12.63 19.45 12.12 19.14 11.81L17.19 9.86C17.09 9.76 17.02 9.64 16.98 9.51L16.5 8.25C16.39 7.96 16.11 7.78 15.81 7.78H14.21C13.91 7.78 13.63 7.96 13.53 8.25L13.05 9.51C13.01 9.64 12.94 9.76 12.84 9.86L10.89 11.81C10.58 12.12 10.58 12.63 10.89 12.94L12.84 14.89C12.94 14.99 13.01 15.11 13.05 15.24L13.53 16.5C13.63 16.79 13.91 16.97 14.21 16.97H15.81C16.11 16.97 16.39 16.79 16.5 16.5L16.98 15.24C17.02 15.11 17.09 14.99 17.19 14.89L19.14 12.94ZM15 15.5C14.17 15.5 13.5 14.83 13.5 14C13.5 13.17 14.17 12.5 15 12.5C15.83 12.5 16.5 13.17 16.5 14C16.5 14.83 15.83 15.5 15 15.5ZM7 11H5C4.45 11 4 11.45 4 12C4 12.55 4.45 13 5 13H7V15C7 15.55 7.45 16 8 16C8.55 16 9 15.55 9 15V13H11C11.55 13 12 12.55 12 12C12 11.45 11.55 11 11 11H9V9C9 8.45 8.55 8 8 8C7.45 8 7 8.45 7 9V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="currentColor"/>
          </svg>
          系统设置
        </div>
      </div>
      
      <!-- 右侧内容区域 -->
      <div class="profile-main">
        <!-- 个人资料 -->
        <div v-if="activeMenu === 'profile'" class="profile-section">
          <h2>个人资料</h2>
          <div class="profile-info">
            <div class="avatar-section">
              <img :src="userInfo.avatar" :alt="userInfo.name" class="profile-avatar" />
              <button class="change-avatar-btn" @click="changeAvatar">更换头像</button>
            </div>
            
            <div class="info-form">
              <div class="form-group">
                <label>用户名</label>
                <input type="text" v-model="userInfo.name" class="form-input" />
              </div>
              
              <div class="form-group">
                <label>邮箱</label>
                <input type="email" v-model="userInfo.email" class="form-input" />
              </div>
              
              <div class="form-group">
                <label>手机号</label>
                <input type="tel" v-model="userInfo.phone" class="form-input" />
              </div>
              
              <div class="form-group">
                <label>个人简介</label>
                <textarea v-model="userInfo.bio" class="form-textarea" rows="4"></textarea>
              </div>
              
              <button class="save-btn">保存资料</button>
            </div>
          </div>
        </div>

        <!-- 在右侧内容区添加 -->
        <div v-else-if="activeMenu === 'vip'" class="vip-purchase-page">
          <h2>购买会员</h2>
          <div class="vip-cards">
            <div class="vip-card gold">
              <div class="vip-title">金牌会员</div>
              <div class="vip-price">￥99/年</div>
              <ul>
                <li>全部特权</li>
                <li>专属标识</li>
                <li>优先客服</li>
              </ul>
              <button @click="buyVip('gold')">购买金牌会员</button>
            </div>
            <div class="vip-card silver">
              <div class="vip-title">银牌会员</div>
              <div class="vip-price">￥59/年</div>
              <ul>
                <li>大部分特权</li>
                <li>专属标识</li>
              </ul>
              <button @click="buyVip('silver')">购买银牌会员</button>
            </div>
            <div class="vip-card bronze">
              <div class="vip-title">铜牌会员</div>
              <div class="vip-price">￥29/年</div>
              <ul>
                <li>基础特权</li>
              </ul>
              <button @click="buyVip('bronze')">购买铜牌会员</button>
            </div>
          </div>
        </div>
        
        <!-- 我的作品 -->
        <div v-else-if="activeMenu === 'works'" class="works-section">
          <h2>我的作品</h2>
          <div class="works-grid">
            <div class="work-item" v-for="work in works" :key="work.id">
              <img :src="work.cover" :alt="work.title" class="work-cover" />
              <div class="work-info">
                <h3>{{ work.title }}</h3>
                <p>{{ work.description }}</p>
                <div class="work-stats">
                  <span>浏览: {{ work.views }}</span>
                  <span>收藏: {{ work.collections }}</span>
                  <span>点赞: {{ work.likes }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 创作按钮区域 -->
          <div class="create-buttons-container">
            <!-- 展开的创作选项 -->
            <div v-if="showCreateOptions" class="create-options">
              <div class="create-option" @click="selectCreateType('image')">
                <img src="/static/images/default-image.jpg" alt="图片创作" class="create-option-image" />
                <span class="create-option-label">图片</span>
              </div>
              <div class="create-option" @click="selectCreateType('music')">
                <img src="/static/images/default-music.jpg" alt="音乐创作" class="create-option-image" />
                <span class="create-option-label">音乐</span>
              </div>
              <div class="create-option" @click="selectCreateType('video')">
                <img src="/static/images/default-video.jpg" alt="视频创作" class="create-option-image" />
                <span class="create-option-label">视频</span>
              </div>
            </div>
            
            <!-- 加号按钮 -->
            <div 
              class="create-toggle" 
              :class="{ active: showCreateOptions }"
              @click="toggleCreateOptions"
            >
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"/>
              </svg>
            </div>
          </div>
        </div>
        
        <!-- 我的收藏 -->
        <div v-else-if="activeMenu === 'collections'" class="collections-section">
          <h2>我的收藏</h2>
          <div class="collections-grid">
            <div class="collection-item" v-for="collection in collections" :key="collection.id">
              <img :src="collection.cover" :alt="collection.title" class="collection-cover" />
              <div class="collection-info">
                <h3>{{ collection.title }}</h3>
                <p>{{ collection.description }}</p>
                <div class="collection-stats">
                  <span>收藏时间: {{ collection.date }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 浏览记录 -->
        <div v-else-if="activeMenu === 'history'" class="history-section">
          <h2>浏览记录</h2>
          <div class="history-list">
            <div class="history-item" v-for="history in browseHistory" :key="history.id">
              <img :src="history.cover" :alt="history.title" class="history-cover" />
              <div class="history-info">
                <h3>{{ history.title }}</h3>
                <p>{{ history.description }}</p>
                <div class="history-stats">
                  <span>浏览时间: {{ history.date }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 我的收益 -->
        <div v-else-if="activeMenu === 'earnings'" class="earnings-section">
          <h2>我的收益</h2>
          <div class="earnings-summary">
            <div class="earning-card">
              <h3>总收益</h3>
              <p class="earning-amount">¥{{ earnings.total.toFixed(2) }}</p>
            </div>
            
            <div class="earning-card">
              <h3>本月收益</h3>
              <p class="earning-amount">¥{{ earnings.monthly.toFixed(2) }}</p>
            </div>
            
            <div class="earning-card">
              <h3>作品数量</h3>
              <p class="earning-amount">{{ earnings.worksCount }}</p>
            </div>
          </div>
          
          <div class="earnings-details">
            <h3>收益明细</h3>
            <table class="earnings-table">
              <thead>
                <tr>
                  <th>日期</th>
                  <th>作品名称</th>
                  <th>收益类型</th>
                  <th>金额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="detail in paginatedEarnings" :key="detail.id">
                  <td>{{ detail.date }}</td>
                  <td>{{ detail.workTitle }}</td>
                  <td>{{ detail.type }}</td>
                  <td>¥{{ detail.amount }}</td>
                </tr>
              </tbody>
            </table>
            
            <!-- 分页控件 -->
            <div class="pagination">
              <button 
                class="pagination-btn" 
                :disabled="currentPage === 1" 
                @click="prevPage"
              >
                上一页
              </button>
              
              <span class="pagination-info">
                第 {{ currentPage }} 页，共 {{ totalPages }} 页
              </span>
              
              <button 
                class="pagination-btn" 
                :disabled="currentPage === totalPages" 
                @click="nextPage"
              >
                下一页
              </button>
            </div>
          </div>
        </div>
        
        <!-- 系统设置 -->
        <div v-else-if="activeMenu === 'settings'" class="settings-section">
          <h2>系统设置</h2>
          <div class="settings-form">
            <div class="form-group">
              <label>通知设置</label>
              <div class="checkbox-group">
                <label class="checkbox-label">
                  <input type="checkbox" v-model="settings.notifications.email" />
                  邮件通知
                </label>
                <label class="checkbox-label">
                  <input type="checkbox" v-model="settings.notifications.sms" />
                  短信通知
                </label>
              </div>
            </div>
            
            <div class="form-group">
              <label>隐私设置</label>
              <div class="radio-group">
                <label class="radio-label">
                  <input type="radio" v-model="settings.privacy" value="public" />
                  公开
                </label>
                <label class="radio-label">
                  <input type="radio" v-model="settings.privacy" value="friends" />
                  仅好友可见
                </label>
                <label class="radio-label">
                  <input type="radio" v-model="settings.privacy" value="private" />
                  私密
                </label>
              </div>
            </div>
            
            <div class="form-group">
              <label>主题设置</label>
              <select v-model="settings.theme" class="form-select">
                <option value="light">浅色主题</option>
                <option value="dark">深色主题</option>
                <option value="auto">跟随系统</option>
              </select>
            </div>
            
            <button class="save-btn">保存设置</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 头像选择器模态框 -->
    <div v-if="showAvatarSelector" class="avatar-selector-modal" @click="closeAvatarSelector">
      <div class="avatar-selector-content" @click.stop>
        <div class="avatar-selector-header">
          <h3>选择头像</h3>
          <button class="close-btn" @click="closeAvatarSelector">×</button>
        </div>
        <div class="avatar-grid">
          <div 
            v-for="avatar in avatarList" 
            :key="avatar" 
            class="avatar-item"
            @click="selectAvatar(avatar)"
          >
            <img :src="avatar" :alt="`头像${avatar}`" class="avatar-option" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'

// 当前激活的菜单
const activeMenu = ref('profile')

const buyVip = (level: 'gold' | 'silver' | 'bronze') => {
  // 这里可以弹窗或调用支付接口
  alert(`已选择购买${level === 'gold' ? '金牌' : level === 'silver' ? '银牌' : '铜牌'}会员`);
  // 购买成功后可设置 userInfo.value.isVip = true，并记录会员等级
}

// 用户信息
const userInfo = ref({
  name: '张三',
  email: 'zhangsan@example.com',
  phone: '13800138000',
  bio: '这是一个热爱创作的用户',
  avatar: '/static/images/default-avatar.svg'
})

// 我的作品数据
const works = ref([
  {
    id: 1,
    title: '作品一',
    description: '这是我的第一个作品',
    cover: '/static/images/image1.jpg',
    views: 1234,
    collections: 56,
    likes: 89
  },
  {
    id: 2,
    title: '作品二',
    description: '这是我的第二个作品',
    cover: '/static/images/image2.jpg',
    views: 987,
    collections: 45,
    likes: 67
  },
  {
    id: 3,
    title: '作品三',
    description: '这是我的第三个作品',
    cover: '/static/images/image3.jpg',
    views: 2345,
    collections: 123,
    likes: 156
  }
])

// 我的收藏数据
const collections = ref([
  {
    id: 1,
    title: '收藏作品一',
    description: '我收藏的第一个作品',
    cover: '/static/images/image4.jpg',
    date: '2023-05-15'
  },
  {
    id: 2,
    title: '收藏作品二',
    description: '我收藏的第二个作品',
    cover: '/static/images/image5.jpg',
    date: '2023-05-20'
  }
])

// 浏览记录数据
const browseHistory = ref([
  {
    id: 1,
    title: '浏览作品一',
    description: '我浏览过的一个作品',
    cover: '/static/images/image6.jpg',
    date: '2023-05-25 14:30'
  },
  {
    id: 2,
    title: '浏览作品二',
    description: '我浏览过的另一个作品',
    cover: '/static/images/image7.jpg',
    date: '2023-05-24 10:15'
  }
])

// 收益数据
const earnings = ref({
  total: 0,
  monthly: 0,
  worksCount: 0,
  details: [
    {
      id: 1,
      date: '2023-05-20',
      workTitle: '作品一',
      type: '浏览收益',
      amount: 12.34
    },
    {
      id: 2,
      date: '2023-05-18',
      workTitle: '作品二',
      type: '收藏收益',
      amount: 5.67
    },
    {
      id: 3,
      date: '2023-05-15',
      workTitle: '作品三',
      type: '点赞收益',
      amount: 3.21
    },
    {
      id: 4,
      date: '2023-05-12',
      workTitle: '作品四',
      type: '浏览收益',
      amount: 8.90
    },
    {
      id: 5,
      date: '2023-05-10',
      workTitle: '作品五',
      type: '收藏收益',
      amount: 6.78
    },
    {
      id: 6,
      date: '2023-05-08',
      workTitle: '作品六',
      type: '点赞收益',
      amount: 2.34
    },
    {
      id: 7,
      date: '2023-05-05',
      workTitle: '作品七',
      type: '浏览收益',
      amount: 11.56
    },
    {
      id: 8,
      date: '2023-05-03',
      workTitle: '作品八',
      type: '收藏收益',
      amount: 7.89
    },
    {
      id: 9,
      date: '2023-05-01',
      workTitle: '作品九',
      type: '点赞收益',
      amount: 4.56
    },
    {
      id: 10,
      date: '2023-04-28',
      workTitle: '作品十',
      type: '浏览收益',
      amount: 9.01
    },
    {
      id: 11,
      date: '2023-04-25',
      workTitle: '作品十一',
      type: '收藏收益',
      amount: 6.23
    },
    {
      id: 12,
      date: '2023-04-22',
      workTitle: '作品十二',
      type: '点赞收益',
      amount: 3.45
    }
  ]
})

// 目标值（用于动画）
const targetEarnings = ref({
  total: 1234.56,
  monthly: 345.67,
  worksCount: 15
})

// 分页相关数据
const currentPage = ref(1)
const itemsPerPage = ref(5)

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(earnings.value.details.length / itemsPerPage.value)
})

// 计算当前页的收益明细
const paginatedEarnings = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value
  const end = start + itemsPerPage.value
  return earnings.value.details.slice(start, end)
})

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 系统设置
const settings = ref({
  notifications: {
    email: true,
    sms: false
  },
  privacy: 'public',
  theme: 'light'
})

// 头像选择相关
const showAvatarSelector = ref(false)
const avatarList = ref(Array.from({ length: 20 }, (_, i) => `/static/images/heads/avatar${i + 1}.png`))

// 创作相关
const showCreateOptions = ref(false)
const createType = ref('') // 'image', 'video', 'music'
// @ts-ignore
const newWork = ref({
  title: '',
  description: '',
  file: null as File | null,
  cover: '' // 封面图
})

// 切换菜单
const switchMenu = (menu: string) => {
  activeMenu.value = menu
  
  // 当切换到收益页面时，触发动画
  if (menu === 'earnings') {
    // 设置一个短暂的延迟以确保DOM已加载
    setTimeout(() => {
      animateEarnings()
    }, 100)
  }
}

// 动画函数
const animateEarnings = () => {
  // 重置当前值
  earnings.value.total = 0
  earnings.value.monthly = 0
  earnings.value.worksCount = 0
  
  // 动画持续时间（毫秒）
  const duration = 2000
  const startTime = Date.now()
  
  // 动画函数
  const animate = () => {
    const elapsed = Date.now() - startTime
    const progress = Math.min(elapsed / duration, 1)
    
    // 使用缓动函数使动画更平滑
    const easeOutQuart = 1 - Math.pow(1 - progress, 4)
    
    earnings.value.total = Math.floor(targetEarnings.value.total * easeOutQuart * 100) / 100
    earnings.value.monthly = Math.floor(targetEarnings.value.monthly * easeOutQuart * 100) / 100
    earnings.value.worksCount = Math.floor(targetEarnings.value.worksCount * easeOutQuart)
    
    if (progress < 1) {
      requestAnimationFrame(animate)
    }
  }
  
  requestAnimationFrame(animate)
}

// 页面加载时，如果默认显示收益页面，则触发动画
onMounted(() => {
  if (activeMenu.value === 'earnings') {
    // 设置一个短暂的延迟以确保DOM已加载
    setTimeout(() => {
      animateEarnings()
    }, 100)
  }
})

// 更换头像
const changeAvatar = () => {
  showAvatarSelector.value = true
}

// 选择头像
const selectAvatar = (avatarPath: string) => {
  userInfo.value.avatar = avatarPath
  showAvatarSelector.value = false
}

// 关闭头像选择器
const closeAvatarSelector = () => {
  showAvatarSelector.value = false
}

// 切换创作选项显示
const toggleCreateOptions = () => {
  showCreateOptions.value = !showCreateOptions.value
}

// 选择创作类型
const selectCreateType = (type: string) => {
  createType.value = type
  showCreateOptions.value = false
  // 这里可以添加跳转到创作页面的逻辑
  console.log(`选择创作类型: ${type}`)
}

// 重置创作表单
</script>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f8f8;
  min-height: calc(100vh - 60px);
}

.profile-header {
  margin-bottom: 30px;
}

.profile-header h1 {
  color: #333;
  font-size: 2rem;
  margin: 0;
}

.profile-content {
  display: flex;
  gap: 30px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.vip-purchase-page {
  padding: 30px 0;
  text-align: center;
}
.vip-cards {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 30px;
}
.vip-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  padding: 32px 24px;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vip-card.gold { border: 2px solid #ffd700; }
.vip-card.silver { border: 2px solid #c0c0c0; }
.vip-card.bronze { border: 2px solid #cd7f32; }
.vip-title { font-size: 1.3rem; font-weight: bold; margin-bottom: 10px; }
.vip-price { font-size: 1.2rem; color: #646cff; margin-bottom: 16px; }
.vip-card ul { text-align: left; margin-bottom: 18px; }
.vip-card button {
  background: #646cff;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 24px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}
.vip-card button:hover { background: #525add; }

/* 左侧菜单样式 */
.profile-sidebar {
  width: 250px;
  background: #f5f5f5;
  padding: 20px 0;
  border-right: 1px solid #eee;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  cursor: pointer;
  color: #666;
  font-size: 1rem;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.menu-item:hover {
  background: rgba(100, 108, 255, 0.1);
  color: #646cff;
}

.menu-item.active {
  background: rgba(100, 108, 255, 0.15);
  color: #646cff;
  border-left: 3px solid #646cff;
}

.menu-item svg {
  flex-shrink: 0;
}

/* 右侧内容区域样式 */
.profile-main {
  flex: 1;
  padding: 30px;
  min-height: 500px;
  position: relative;
}

.profile-main h2 {
  color: #333;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 个人资料样式 */
.profile-info {
  display: flex;
  gap: 40px;
}

.avatar-section {
  text-align: center;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #eee;
  margin-bottom: 15px;
}

.change-avatar-btn {
  background: #646cff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.change-avatar-btn:hover {
  background: #525add;
}

.info-form {
  flex: 1;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: #646cff;
  box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.save-btn {
  background: #646cff;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.save-btn:hover {
  background: #525add;
}

/* 作品、收藏、浏览记录样式 */
.works-grid,
.collections-grid,
.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.work-item,
.collection-item,
.history-item {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.work-item:hover,
.collection-item:hover,
.history-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.work-cover,
.collection-cover,
.history-cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.work-info,
.collection-info,
.history-info {
  padding: 15px;
}

.work-info h3,
.collection-info h3,
.history-info h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.1rem;
}

.work-info p,
.collection-info p,
.history-info p {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

.work-stats,
.collection-stats,
.history-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #999;
}

/* 收益样式 */
.earnings-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.earning-card {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.earning-card h3 {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 1rem;
}

.earning-amount {
  margin: 0;
  color: #646cff;
  font-size: 1.5rem;
  font-weight: bold;
}

.earnings-details {
  margin-top: 30px;
}

.earnings-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.earnings-table th,
.earnings-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.earnings-table th {
  background: #f5f5f5;
  color: #333;
  font-weight: 600;
}

.earnings-table tr:last-child td {
  border-bottom: none;
}

.earnings-table tr:hover {
  background: rgba(100, 108, 255, 0.05);
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 20px 0;
}

.pagination-btn {
  padding: 8px 16px;
  background: #646cff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: #525add;
}

.pagination-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.pagination-info {
  color: #666;
  font-size: 0.9rem;
}

/* 系统设置样式 */
.settings-form {
  max-width: 500px;
}

.checkbox-group,
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #333;
}

.checkbox-label input,
.radio-label input {
  margin: 0;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* 创作按钮区域 */
.create-buttons-container {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.create-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 15px;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.create-options.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.create-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.create-option:hover {
  transform: scale(1.05);
}

.create-option-image {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 2px solid white;
}

.create-option-label {
  color: #333;
  font-size: 0.8rem;
  margin-top: 5px;
  font-weight: 500;
}

.create-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #646cff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(100, 108, 255, 0.3);
  transition: all 0.3s ease;
  color: white;
}

.create-toggle:hover {
  background: #525add;
  transform: scale(1.1);
}

.create-toggle.active {
  transform: rotate(45deg);
  background: #ff6b6b;
}

.create-toggle.active:hover {
  background: #ff5252;
}

/* 头像选择器样式 */
.avatar-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.avatar-selector-content {
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.avatar-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.avatar-selector-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: #f5f5f5;
  color: #333;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 15px;
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.avatar-item {
  cursor: pointer;
  transition: transform 0.2s ease;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-item:hover {
  transform: scale(1.1);
}

.avatar-option {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.avatar-item:hover .avatar-option {
  border-color: #646cff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
  }
  
  .profile-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #eee;
  }
  
  .profile-info {
    flex-direction: column;
    align-items: center;
  }
  
  .works-grid,
  .collections-grid,
  .history-list {
    grid-template-columns: 1fr;
  }
  
  .earnings-summary {
    grid-template-columns: 1fr;
  }
  
  .avatar-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
  
  .avatar-option {
    height: 60px;
  }
  
  .create-buttons-container {
    bottom: 20px;
    right: 20px;
  }
  
  .create-toggle {
    width: 50px;
    height: 50px;
  }
  
  .create-option-image {
    width: 40px;
    height: 40px;
  }
}

/* 夜间模式适配 */
body.dark-mode .profile-container {
  background: #181a1b !important;
}

body.dark-mode .profile-header h1 {
  color: #f8f9fa !important;
}

body.dark-mode .profile-content {
  background: #232324 !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.6);
}

body.dark-mode .profile-sidebar {
  background: #202124 !important;
  border-right: 1px solid #333 !important;
}

body.dark-mode .menu-item {
  color: #b0b8c1 !important;
}

body.dark-mode .menu-item:hover,
body.dark-mode .menu-item.active {
  background: rgba(100, 108, 255, 0.12) !important;
  color: #646cff !important;
  border-left: 3px solid #646cff !important;
}

body.dark-mode .profile-main {
  color: #f8f9fa !important;
}

body.dark-mode .profile-main h2 {
  color: #f8f9fa !important;
  border-bottom: 1px solid #333 !important;
}

body.dark-mode .profile-avatar {
  border: 3px solid #333 !important;
  background: #232324;
}

body.dark-mode .change-avatar-btn,
body.dark-mode .save-btn,
body.dark-mode .pagination-btn {
  background: #535bf2 !important;
  color: #fff !important;
}

body.dark-mode .change-avatar-btn:hover,
body.dark-mode .save-btn:hover,
body.dark-mode .pagination-btn:hover:not(:disabled) {
  background: #646cff !important;
}

body.dark-mode .form-group label,
body.dark-mode .create-option-label,
body.dark-mode .pagination-info {
  color: #b0b8c1 !important;
}

body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode .form-select {
  background: #232324 !important;
  color: #f8f9fa !important;
  border: 1px solid #333 !important;
}

body.dark-mode .form-input:focus,
body.dark-mode .form-textarea:focus,
body.dark-mode .form-select:focus {
  border-color: #646cff !important;
  box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.2);
}

body.dark-mode .works-grid,
body.dark-mode .collections-grid,
body.dark-mode .history-list {
  background: none !important;
}

body.dark-mode .work-item,
body.dark-mode .collection-item,
body.dark-mode .history-item {
  border: 1px solid #333 !important;
  background: #232324 !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

body.dark-mode .work-info h3,
body.dark-mode .collection-info h3,
body.dark-mode .history-info h3 {
  color: #f8f9fa !important;
}

body.dark-mode .work-info p,
body.dark-mode .collection-info p,
body.dark-mode .history-info p {
  color: #b0b8c1 !important;
}

body.dark-mode .work-stats,
body.dark-mode .collection-stats,
body.dark-mode .history-stats {
  color: #888 !important;
}

body.dark-mode .earning-card {
  background: #232324 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode .earning-card h3 {
  color: #b0b8c1 !important;
}

body.dark-mode .earning-amount {
  color: #646cff !important;
}

body.dark-mode .earnings-table {
  background: #232324 !important;
  color: #f8f9fa !important;
}

body.dark-mode .earnings-table th {
  background: #202124 !important;
  color: #b0b8c1 !important;
}

body.dark-mode .earnings-table td {
  border-bottom: 1px solid #333 !important;
}

body.dark-mode .earnings-table tr:hover {
  background: rgba(100, 108, 255, 0.08) !important;
}

body.dark-mode .avatar-selector-content {
  background: #232324 !important;
  color: #f8f9fa !important;
}

body.dark-mode .avatar-selector-header {
  border-bottom: 1px solid #333 !important;
}

body.dark-mode .avatar-selector-header h3 {
  color: #f8f9fa !important;
}

body.dark-mode .close-btn {
  color: #aaa !important;
}

body.dark-mode .close-btn:hover {
  background: #333 !important;
  color: #fff !important;
}

body.dark-mode .avatar-option {
  border: 2px solid #232324 !important;
  background: #232324;
}

body.dark-mode .avatar-item:hover .avatar-option {
  border-color: #646cff !important;
}

body.dark-mode .create-option-image {
  border: 2px solid #232324 !important;
  background: #232324;
}

body.dark-mode .create-toggle {
  background: #535bf2 !important;
  color: #fff !important;
}

body.dark-mode .create-toggle:hover {
  background: #646cff !important;
}

body.dark-mode .create-toggle.active {
  background: #ff6b6b !important;
}

body.dark-mode .create-toggle.active:hover {
  background: #ff5252 !important;
}
</style>